<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CUA Agent Playground Example</title>
</head>
<body>
    <h1>CUA Agent Playground Example</h1>
    
    <div>
        <h2>Configuration</h2>
        <label for="url">Agent URL:</label><br>
        <input type="text" id="url" placeholder="https://localhost:8000 or peer://peer-id" value="https://localhost:8000" style="width: 400px;"><br><br>
        
        <label for="model">Model:</label><br>
        <input type="text" id="model" placeholder="anthropic/claude-opus-4-1-20250805" value="anthropic/claude-opus-4-1-20250805" style="width: 400px;"><br><br>
    </div>

    <div>
        <h2>Chat</h2>
        <label for="message">Message:</label><br>
        <input type="text" id="message" placeholder="Enter your message here..." style="width: 400px;"><br><br>
        
        <button onclick="sendMessage()">Send Message</button>
        <!-- <button onclick="checkHealth()">Check Health</button> -->
        <button onclick="clearOutput()">Clear Output</button><br><br>
        
        <label for="output">Output:</label><br>
        <textarea id="output" rows="20" cols="80" readonly></textarea>
    </div>

    <script src="https://unpkg.com/peerjs@1.5.5/dist/peerjs.min.js"></script>
    <script type="module">
        // Import the AgentClient from the built library
        import AgentClient from '/dist/index.js';
        
        let client = null;
        
        // Make functions available globally
        window.sendMessage = sendMessage;
        window.checkHealth = checkHealth;
        window.clearOutput = clearOutput;
        
        function log(message) {
            const output = document.getElementById('output');
            const timestamp = new Date().toLocaleTimeString();
            output.value += `[${timestamp}] ${message}\n`;
            output.scrollTop = output.scrollHeight;
        }
        
        function getClient() {
            const url = document.getElementById('url').value.trim();
            if (!url) {
                log('ERROR: Please enter a URL');
                return null;
            }
            
            // Create new client if URL changed or client doesn't exist
            if (!client || client.url !== url) {
                try {
                    client = new AgentClient(url);
                    client.url = url; // Store URL for comparison
                    log(`Created new client for: ${url}`);
                } catch (error) {
                    log(`ERROR creating client: ${error.message}`);
                    return null;
                }
            }
            
            return client;
        }
        
        async function sendMessage() {
            const messageInput = document.getElementById('message');
            const modelInput = document.getElementById('model');
            
            const message = messageInput.value.trim();
            const model = modelInput.value.trim();
            
            if (!message) {
                log('ERROR: Please enter a message');
                return;
            }
            
            if (!model) {
                log('ERROR: Please enter a model');
                return;
            }
            
            const agentClient = getClient();
            if (!agentClient) return;
            
            try {
                log(`Sending message: "${message}"`);
                log(`Using model: ${model}`);
                
                const request = {
                    model: model,
                    input: message
                };
                
                log('Sending request...');
                const response = await agentClient.responses.create(request);
                
                log('Response received:');
                log(JSON.stringify(response, null, 2));
                
                // Clear the message input
                messageInput.value = '';
                
            } catch (error) {
                log(`ERROR: ${error.message}`);
            }
        }
        
        async function checkHealth() {
            const agentClient = getClient();
            if (!agentClient) return;
            
            try {
                log('Checking health...');
                const health = await agentClient.health();
                log(`Health status: ${health.status}`);
            } catch (error) {
                log(`ERROR checking health: ${error.message}`);
            }
        }
        
        function clearOutput() {
            document.getElementById('output').value = '';
        }
        
        // Allow sending message with Enter key
        document.getElementById('message').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });
        
        // Log initial message
        log('CUA Agent Client Browser Example loaded');
        log('Enter a URL (HTTP/HTTPS or peer://) and model, then send a message');
    </script>
</body>
</html>
